<extend name="Base/common"/>
<block name="body">
<body class="guess-page2" >
<div class="container">
<header class="page-head">
</header>
<section class="page-body">
    <div class="game-period-time">
        <!--<span class="guess-date">猜涨跌第</span>-->
        <p class="game-period2">{$startToEnd}</p>
        <p class="awards">
            <a href="{:U('up_prize')}" class="awards_text">上期获奖名单</a>
        </p>
    </div>
    <div class="panel guess-detail">
        <div class="panel-head">
            <h1 class="panel-title">
                <span class="action current">
							<span class="current-time-c securitie">上证指数</span>
                            <!--<time class="current-date current-time-c">01-14 11:23</time>-->
                </span>
            </h1>
        </div>
        <div class="panel-body">
            <div class="real-time-prices">
                <if condition="$stock_info['per'] gt 0">
                    <span class="price cRed" _ntesquote_="code:0000001;attr:price;fixed:2;color:updown">{$stock_info.cur_price}</span>
                    <!--<span class="updown m-left cRed" _ntesquote_="code:0000001;attr:updown;fixed:2;color:updown">{$stock_info.rose}</span>-->
                    <!--<span class="percent m-left price cRed" _ntesquote_="code:0000001;attr:percent;percent:2;color:updown">{$stock_info.per}</span>-->
                <else/>
                    <span class="price cGreen" _ntesquote_="code:0000001;attr:price;fixed:2;color:updown">{$stock_info.cur_price}</span>
                    <!--<span class="updown m-left cGreen" _ntesquote_="code:0000001;attr:updown;fixed:2;color:updown">{$stock_info.rose}</span>-->
                    <!--<span class="percent m-left price cGreen" _ntesquote_="code:0000001;attr:percent;percent:2;color:updown">{$stock_info.per}</span>-->
                </if>
            </div>
            <div class="diagram">
                <img src="http://img1.money.126.net/chart/hs/time/540x360/0000001.png" style="width:100%; height:220px ">
            </div>
            <if condition="$mark eq 1">
            <div class="opration">


                <!--活动截止-->
                <div class="opration">
                    <img src="__IMG__/icon_20.png" alt="" width="100%">
                </div>
                <else/>
                <div class="current-status">
                    <!--<div class="persent left" init-name="uppersent-html" init-templete="<span>{value}</span>">
                    <span>{value}</span>
                    </div>
                    <div class="progress">
                    <div class="left" init-name="uppersent-attr" init-attr="style=width:{value}"></div>
                    <div class="right" init-name="downpersent-attr" init-attr="style=width:{value}"></div>
                    </div>
                    <div class="persent right" init-name="downpersent-html" init-templete="<span>{value}</span>">
                    <span>{value}</span>
                    </div>-->
                    <div class="countdown">
                        <div class="guess-time"><span>下注竞猜：</span>
                            <span init-name="currentdate-html">{$result.bet_date}上证涨跌</span>
                        </div>
                        <div class="abort-game">
                            <span class="">离本次竞猜截止还有</span>
									<span class="cuntTamp">
										<em class="abort-time abort-day" id="time_d"></em>天
										<em class="abort-time abort-hour" id="time_h"></em>时
										<em class="abort-time abort-minute" id="time_m"></em>分
										<em class="abort-time abort-second" id="time_s"></em>秒
									</span>
                        </div>
                    </div>
                    <div class="abort-game-text hide" >
                        <p class="abort-game">亲爱的用户，本期下注已截止 !</p>
                        <p class="abort-game">
                            即将公布中奖名单，敬请期待 !
                        </p>
                    </div>
                    <div class="curve">
                        <span class="curve-btn">查看实时赔率曲线图</span>

                    </div>
                </div>
                <div class="bet-on2">
                    <div class="bet-select2">
                        <div class="option_my">
                            <div class="block up" bet-side="up" data="{$result.rise_odds}">
                                <div class="jumbotron-text red-C">
                                    <i>我看涨</i>
                                </div>
                                <div class="detail pink-C">
                                    <p>
                                        <strong class="up-bet-number2">{$result.rise_gold_bean}</strong>豆/
                                        <span>{$result.rise_num}</span>人</p>
                                    <div class="extra">
                                        <span class="yieldup" init-name="yieldup-html" init-templete="当前赔率：{$result.rise_odds}">当前赔率：{$result.rise_odds}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="option_my">
                            <div class="block down" bet-side="down" data="{$result.fall_odds}">
                                <div class="jumbotron-text">
                                    <i>我看跌</i>
                                </div>
                                <div class="detail grenn-C">
                                    <p><strong class="down-bet-number2">{$result.fall_gold_bean}</strong>豆/<span>{$result.fall_num}</span>人</p>
                                    <div class="extra">
                                        <span class="yielddown">当前赔率：{$result.fall_odds}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--<div class="bean-bet">
                    <input type="number" class="bean-bet-input" placeholder="请输入本次投注金豆数" id="bean-input">
                    <p class="error-info"></p>
                    <div class="bet-info-submit">
                    <input type="submit" class="bet-submit-btn" value="确认下注" disabled="disabled" id="bet-submit-btn">
                    &lt;!&ndash;<input type="submit" class="bet-submit-btn" value="确认下注" id="bet-submit-btn">&ndash;&gt;
                    </div>
                    </div>
                    <div class="extra-info">
                    <p class="expect-income hide"><strong>预期收益：</strong><em init-name="earning-html" init-templete="{value}">{value}</em> 金豆</p>
                    <p><strong>金豆余额：</strong><em init-name="balance-html" init-templete="{value}" id="balance-left">{value}</em> </p>
                    <div class="tips">
                    <a href="guide.html#game-bean">如何挣金豆</a>
                    <a href="guide.html#game-play">游戏玩法</a>
                    <a href="guide.html#game-questions">使用帮助</a>
                    </div>
                    </div>-->
                </div>
            </div>

                </if>
        </div>

    </div>
</section>
<!--<div class="game-over"></div>-->

<footer class="page-foot" init-name="hasbet-class">
    <!--
    <div class="details hide bet-history" id="bet-history">
        <header class="details-header">
            <h1 class="details-title details-title-bet-up">
                此次竞猜已下注 <em init-name="betcount-html">{value}</em> 次
            </h1>
            <h1 class="details-title details-title-bet-down">
                此次竞猜已下注 <em init-name="betcount-html">{value}</em> 次
            </h1>
        </header>
        <div class="details-detail">
        </div>
    </div>
    -->
    <!--
    <div class="bet-info-submit">
        <input type="submit" class="bet-submit-btn" value="确认下注" disabled="disabled" id="bet-submit-btn">
    </div>
    -->
</footer>


<!--下注成功弹窗-->
<!--<div class="guess_mask">
<div class="tip_box">
<span class="icon_close" id="icon_close"></span>
<span class="icon_operate_success"></span>
&lt;!&ndash;    <span class="tip_text">恭喜您下注成功！</span> &ndash;&gt;
<div class="lottery_bet_tip">
您本次投注<span class="spend_bean"></span>金豆
<div>
竞猜<span class="lottery_bet_day"></span>大盘指数<span class="way_bean">上涨</span>
</div>
</div>
<div class="lottery_time">将于<span class="time"></span>开奖</div>
</div>
</div>-->
<div class="guess_mask">
    <div class="guess-Bet">
        <span></span>
        <p>投注成功</p>
    </div>
</div>
<div class="guess_mask_error">
    <div class="guess-Bet-error">
        <span></span>
        <p>投注失败</p>
    </div>
</div>

<!-- 竞猜输入豆豆提示框-->
<div class="currency_mask_my" style="display: none">
    <div class="currency_box">
        <div class="currency_content">
            <div class="bean-bet">
                <h3 class="currency-tittle">您
                    <em class="guess-status guess-red">猜涨</em>
                    <span class="guess-black">今日</span>大盘
							<span class=" ">
								<input type="button" class="line_close_my currency_close">
							</span>
                </h3>
                <div class="earnings-status">
                    <!--<p class="expect-income"><strong>当前赔率：</strong><em init-name="earning-html" init-templete="{value}">{value}</em> </p>-->
                    <p class="extra expect-income yield">
                        <span class="bet-yleld">当前赔率:<font class="bet"></font></span>
                    </p>
                    <p class="expect-income margin"><strong>预期收益：</strong><em class="earnings">-</em></p>
                </div>
                <div>
                    <input type="number" class="bean-bet-input gold_bean" placeholder="点此下注金豆，立即赢大奖" name="gold_bean" >
                </div>

            </div>
            <div class="extra-info">
                <p class="error-hint hide" >您的金豆余额不足</p>
                <p class="balance"><strong>金豆余额：</strong><em>{$user_info['gold_bean']}</em> </p>
            </div>
        </div>
        <div class="bet-info-submit2">
            <input type="hidden" name="type" value="" class="type">
            <input type="button" class="bet-think-btn2 currency_close" value="再想想">
            <!--<input type="submit" class="bet-submit-btn" value="再想想" disabled="disabled" id="bet-think-btn">-->
            <input type="submit" class="bet-submit-btn2 bet-submit-C subs" value="确认" >
            <!--<input type="submit" class="bet-submit-btn" value="确认下注" id="bet-submit-btn">-->
        </div>
    </div>
</div>
<!--提示框-->
<!--<div class="alert_mask">
<div class="alert_box">

<div class="alert_content">
<p class="alert_header">您的金豆余额不足</p>
<p class="alert_tip">每日分享和登录即可免费获得金豆</p>
</div>
<a href="javascript:void(0);" class="alert_confirm">确  定</a>
</div>
</div>-->
<!--查看实时赔率曲线图-->
<div class="line_mask_my">
    <div class="line_box">
        <div class="line_content">
            <p class="line_header" >实时赔率曲线图<span class="line_close line_ok"></span></p>
            <div id="odds_line_my" class="odds_line" style="width: 300px;margin: 0 auto;height:300px;">

            </div>

        </div>
        <a href="javascript:void(0);" class="line_confirm line_ok">确  定</a>
        <div clsaa="tooltip"></div>
    </div>
</div>

    <!--<div class="hfive_login_mask">
    <div class="hfive_login_box">
    <div class="hfive_title">登 录</div>
    <form enctype="multipart/form-data" action="#" method="post">
    <div class="hfive_username_wrap">
    <input class="hfive_ipt_username" type="text" placeholder="请输入您的网易邮箱号">
    </div>
    <div class="hfive_password_wrap">
    <input class="hfive_ipt_password" type="password"  placeholder="请输入您的密码">
    </div>
    <div class="hfive_error_tip">您输入的密码有误</div>
    <div class="hfive_btn_box">
    &lt;!&ndash;<a class="hfive_btn_login_common hfive_btn_login" href="javascript:void(0);">登 录</a>&ndash;&gt;
    <button type="submit" class="u-btn2">登陆</button>
    <a class="hfive_btn_login_common hfive_btn_cancel" href="javascript:void(0);">取 消</a>
    </div>
    </form>
    <div class="hfive_icon_close"></div>
    </div>
    </div>
-->

</div>

<block name="script">
<script type="text/javascript" src="__JS__/esl.js"></script>
    <script type="text/javascript">

    require.config({
        paths:{
            echarts:'__JS__/echarts',
            'echarts/chart/line' : '__JS__/echarts-map',
            'echarts/chart/line': '__JS__/echarts-map'

        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
            [
                'echarts',
                'echarts/chart/line' ,// 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line' // 使用折线图就加载line模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('odds_line_my'));

                option = {
                    timeline : {
                        //时间轴时间列表
                        data:[
                            '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01'
                        ],
                        //自定义处理，只显示年份
                        label:{
                            formatter : function(s) {
                                return s.slice(0, 4);
                            }
                        },
                        //时间轴的位置设定
                        height:80,
                        x:100,

                        //时间轴播放控制
                        autoPlay : true,
                        playInterval : 2000
                    },


                    color: ['#F4447A','#81D113'],
                     grid:{
                       x:20,
                       x2:20,


                     },//距离水平线位置
                    tooltip : {
                        trigger: 'axis'
                    },
                    calculable : true,
                    legend: {
                        data:['看涨','看跌'],
                        x: 'center',
                        y:20,

                    },
                    xAxis : [
                        {
                            type : 'category',
                            splitNumber:6,
                            inside:true,
                            boundaryGap: !1,
                            splitLine:{
                                show:false
                            },
                            data : ['13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','00:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00'],
                            axisLabel:{
                                //X轴刻度配置
                                interval:3//0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            },
                            axisLine : {
                                lineStyle : {
                                    // color : '#CCC'
                                    width:0
                                }
                            }

                        }

                    ],

                    yAxis : [
                        {
                            type : 'value',
                            splitLine:{
                                show:true

                            },

                            min:0,
                            max:5,
                            splitNumber:10,
                            scale:true,
                            name : '',
                            axisLabel : {
                                formatter: '{value}',
                                show : true,
                                textStyle : {
                                    // color : '#28c6de',
                                    align : 'left',
                                    interval:1
                                }
                            },
                            axisLine : {
                                lineStyle : {
                                    // color : '#CCC'
                                    width:0
                                }
                            }
                        }
                    ],
                    series : [


                        {
                            name:'看涨',
                            type:'line',
                            //折线中不要标记点
                            symbol: "none",

                            //平滑曲线
                            smooth:true,
                            yAxisIndex: 0,
                           // data:[2.6, 5.9, 9.0, 5.4, 9.2, 10, 6.8],
                            data:[{$odds['rise_odds']}],
                            markPoint : {
                                symbol: "rectangle",
                                data : [
                                    //{name: "看涨", value:{$odds['cur_rise_odds']},xAxis: 4,yAxis: 6},
                                    {$odds['cur_rise_odds']}
                                ],
                                symbolRotate: [-90, 130],
                                itemStyle: {
                                    normal: {
                                        color: "#f4447a"
                                    }
                                }
                            }
                        },
                        {
                            name:'看跌',
                            type:'line',

                            //折线中不要标记点
                            symbol: "none",

                            //平滑曲线
                            smooth:true,
                            yAxisIndex: 0,
                            data:[{$odds['fall_odds']}],
                            markPoint : {
                                symbol: "rectangle",
                                data : [
                                   // {name: '看跌',value:{$odds['cur_fall_odds']},xAxis: 6,yAxis: 8}
                                    {$odds['cur_fall_odds']}
                                ],
                                symbolRotate: [10, 130],
                                color: "#81d113",
                                itemStyle: {
                                    normal: {
                                        color: "#81d113"
                                    }
                                }
                            }
                        }
                    ]
                };


                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );


        $(function(){
            var countdown_time="{$countdown}";
            if(countdown_time==0){
                $("#time_d").text(0);
                $("#time_h").text(0);
                $("#time_m").text(0);
                $("#time_s").text(0);
            }else{
                show_time();
            }

        });

        function show_time(){
            var countdown="{$countdown}";
            var time_start = new Date().getTime(); //设定当前时间
           // var time_end =  new Date("2016-01-15 00:00:00").getTime(); //设定目标时间
            var time_end =  new Date(countdown).getTime(); //设定目标时间
            // 计算时间差
            var time_distance = time_end - time_start;
            // 天
            var int_day = Math.floor(time_distance/86400000)
            time_distance -= int_day * 86400000;
            // 时
            var int_hour = Math.floor(time_distance/3600000)
            time_distance -= int_hour * 3600000;
            // 分
            var int_minute = Math.floor(time_distance/60000)
            time_distance -= int_minute * 60000;
            // 秒
            var int_second = Math.floor(time_distance/1000)
            time_distance -= int_second*1000;
            // 毫秒
            var int_msecond = time_distance  ;


            // 时分秒为单数时、前面加零
            if(int_day < 10){
                int_day = int_day;
            }
            if(int_hour < 10){
                int_hour = "0" + int_hour;
            }
            if(int_minute < 10){
                int_minute = "0" + int_minute;
            }
            if(int_second < 10){
                int_second = "0" + int_second;
            }
            if(int_msecond < 10){
                int_msecond = "0" + int_msecond;
            }
            // 显示时间 abort-hour abort-minute abort-second
            $("#time_d").text(int_day);
            $("#time_h").text(int_hour);
            $("#time_m").text(int_minute);
            $("#time_s").text(int_second);
            /*  $("#time_ms").val(int_msecond);*/
            // 设置定时器
            setTimeout("show_time()",1000);
        }
        var user_gold_bean="{$user_info.gold_bean}";
        //投注
        $(".subs").click(function(){
            var obj=$(this);
            var gold_bean= parseInt($(".gold_bean").val());
            var type=$(".type").val();
            if(gold_bean<100 || !gold_bean){
                $(".error-hint").show();
                $(".error-hint").html('最少投100');
                return false;
            }
            if(gold_bean>parseInt(user_gold_bean)){
                $(".error-hint").show();
                $(".error-hint").html('您的金豆余额不足');
                return false;
            }
            obj.attr('disabled',true);
            var url="{:U('Index/bet')}";
            $.post(url,{gold_bean:gold_bean,type:type},function(data){
                console.log(data);
                if(data.status){
                    $(".error-hint").show();
                    $(".error-hint").html(data.mes);
                    obj.attr('disabled',false);
                }else{
                    $('.currency_mask_my').hide();
                    $(".guess_mask").show();
                    setTimeout('myrefresh()',2000);
                }
            },'json')

        })
            $('.up').click(function(){
                $(".bet").html($(this).attr('data'));
                $(".guess-status").html("猜涨");
                $(".type").val(1);
                $('.currency_mask_my').show();
                $(".gold_bean").val('');
            });
            $('.down').click(function(){
                $(".bet").html($(this).attr('data'));
                $(".guess-status").html("猜跌");
                $(".type").val(2);
                $('.currency_mask_my').show();
                $(".gold_bean").val('');
            });
            $(".currency_close").click(function(){
                $('.currency_mask_my').hide();
            })

            $('.curve').click(function(){
                $('.line_mask_my').show();
            });
            $('.line_confirm').click(function(){
                $('.line_mask_my').hide();
            });
            $(".gold_bean").keypress(function(e){
                var k = e.keyCode || e.which;
                if(k>=48&&k<=57||k==8){
                    return true;
                }else {
                    return false;
                }
            }).keyup(function(){
                var v = $.trim($(this).val()).replace(/,/g,'');
                if(v.substr(0 ,1)==0){
                    $(this).val("");
                }
                $(this).val($(this).val().replace(/\D/g,''));
               // alert($('.bet').html());
                var profit=Math.round($('.bet').html()*$(this).val());
                $(".earnings").html(profit-$(this).val());
                //$(".earnings").html($(this).val());
            })
    //刷新页面
    function myrefresh(urls) {
        $('.subs').attr('disabled',false);
        if(urls){
            window.location=urls;
        }else{
            window.location.reload();
        }

    }


    </script>
</block>
</block>